<template>
  <el-popover placement="bottom" trigger="hover" width="60%">
    <c-table-template border :data="list">
      <el-table-column align="left" label="车辆基本信息" width="350">
        <template #default="scope">
          <span v-for="(item, index) in k" :key="index">
            {{ scope.row[item] }} &nbsp;
          </span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="单价（元）">
        <template #default="scope">
          {{ filters.thousands(scope.row.price) }}
        </template>
      </el-table-column>
      <el-table-column align="left" label="车架号" prop="vin" width="200" />
      <el-table-column align="left" label="保证金比例">
        <template #default="scope"> {{ scope.row.marginRatio }} % </template>
      </el-table-column>
      <el-table-column align="left" label="保证金金额（元）">
        <template #default="scope">
          {{ filters.thousands(scope.row.totalDeposit) }}
        </template>
      </el-table-column>
    </c-table-template>
    <template #reference>
      <el-link class="ml-sm" type="primary" :underline="false">明细</el-link>
    </template>
  </el-popover>
</template>
<script setup>
import { ref } from "vue";
const k = ["brand", "series", "model"];
defineProps({
  list: {
    type: Array,
    default: [],
  },
});
</script>